<template>
  <div>
    数据上报
    <div class="data_input">
      <!-- 省市区级联选择器 -->
      <div class="pca">
        <el-cascader-panel @change="pcaChange" v-model="form.pca" :props="{ label: 'name', value: 'name' }" :options="pca"></el-cascader-panel>
      </div>
      <!-- 表单 -->
      <div class="form">
        <el-row>
          <el-col :span="12">
            <el-form label-width="80px" size="small" :rules="rules" :model="form" ref="form">
              <el-form-item label="确诊" prop="confirmed">
                <el-input v-model="form.confirmed"></el-input>
              </el-form-item>
              <el-form-item label="疑似" prop="suspected">
                <el-input v-model="form.suspected"></el-input>
              </el-form-item>
              <el-form-item label="死亡" prop="dead">
                <el-input v-model="form.dead"></el-input>
              </el-form-item>
              <el-form-item label="治愈" prop="cure">
                <el-input v-model="form.cure"></el-input>
              </el-form-item>
              <el-form-item label="重症" prop="severe">
                <el-input v-model="form.severe"></el-input>
              </el-form-item>
              <el-form-item label="境外输入" prop="outside">
                <el-input v-model="form.outside"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="primary" @click="submit">
                  提交
                </el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12" style="padding: 0 1em; color: red; font-size: 10px">
            <div>温馨提示：</div>
            <div>
              <p>1. 选中城市</p>
              <p>2. 录入数据</p>
              <p>疫情防控，众志成城</p>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- {{form}} -->
    </div>
  </div>
</template>

<script>
import pca from '@/assets/pca.json'
import { get, post } from '@/utils/request'
import moment from 'moment'

export default {
  data() {
    return {
      rules: {
        confirmed: [{ required: true, message: '请输入确诊人数', trigger: 'blur' }],
        suspected: [{ required: true, message: '请输入疑似人数', trigger: 'blur' }],
        dead: [{ required: true, message: '请输入死亡人数', trigger: 'blur' }],
        cure: [{ required: true, message: '请输入治愈人数', trigger: 'blur' }],
        severe: [{ required: true, message: '请输入重症人数', trigger: 'blur' }],
        outside: [{ required: true, message: '请输入境外输入', trigger: 'blur' }]
      },
      pca,
      form: {
        country: '中国'
      }
    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 将form数据进行克隆
          let data = Object.assign({}, this.form)
          // 如果是更新操作，无需处理省市区
          if (!this.form.id) {
            data.province = this.form.pca[0]
            data.city = this.form.pca[1]
            data.area = this.form.pca[2]
            delete data.pca
          }

          // 交互
          let url = '/epidemic/saveOrUpdate'
          post(url, data).then(response => {
            this.$message({ type: 'success', message: response.message })
          })
          this.form = {}
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    // 当地理位置发生变化的时候
    pcaChange(val) {
      // 获取当前时间 2020-09-02
      let inputTime = moment(new Date().getTime()).format('YYYY-MM-DD')
      let param = {
        page: 1,
        pageSize: 10,
        province: val[0],
        city: val[1],
        area: val[2],
        inputTime
      }
      let url = '/epidemic/pageQuery'
      get(url, param).then(response => {
        let resp = response.data
        // 有数据，之前录入了，修改
        if (resp.total > 0) {
          this.form = resp.list[0]
        } else {
          //如果没有数据，保留默认值，一定要有pca
          this.form = { country: '中国', pca: this.form.pca }
        }
      })
    }
  }
}
</script>
<!-- 
  1.git pull origin master
  2.git add .
  3.git commit -m '注释'
  4.git push origin master
 -->

<style scoped>
.pca {
  margin-bottom: 0.5em;
}
</style>